<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body>
    <script>
      AFRAME.registerComponent("click-listener", {
        init: function () {
          var sceneEl = this.el.sceneEl;
          var self = this;
          console.log(222222222);
          sceneEl.addEventListener("click", function (event) {
            console.log(event);
            // var position =
            //   event.detail.intersection && event.detail.intersection.point;
            // console.log("Clicked at:", position);
            // var entity = document.createElement("a-box");
            // entity.setAttribute("position", position);
            // entity.setAttribute("color", "#FFC65D");
            // entity.setAttribute("depth", "0.5");
            // entity.setAttribute("height", "0.5");
            // entity.setAttribute("width", "0.5");
            // sceneEl.appendChild(entity);
          });
        },
      });
    </script>
    <a-scene cursor="rayOrigin: mouse">
      <a-camera gps-new-camera="gpsMinDistance: 5"></a-camera>

      <a-plane
        position="0 0 0"
        rotation="0 0 0"
        width="100000"
        height="100000"
        color="red"
      ></a-plane>

      <a-entity click-listener></a-entity>
    </a-scene>
  </body>
</html>
